<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>qq彩贝</title>
    <style>
      * {
        padding: 0;
        margin: 0;
      }
      ul,
      li {
        list-style: none;
      }
      header {
        height: 90px;
        background-image: linear-gradient(0deg, #eee, #ccc);
      }
      .wrap {
        width: 1600px;
        margin: 0 auto;
      }
      .wrap > .logo {
        float: left;
        margin-top: 30px;
        margin-right: 80px;
      }
      .wrap > ul {
        float: left;
        font-size: 20px;
        margin-top: 30px;
      }
      .wrap > ul > li {
        float: left;
        margin: 0 5px;
      }
      .wrap > ul > li > a {
        color: #000;
        text-decoration: none;
      }
      .wrap > ul > li > a:hover {
        color: #f00;
      }
      .wrap > .right {
        float: right;
        margin-top: 45px;
      }
      .wrap > .right > a {
        margin: 0 5px;
      }
      .wrap > .right > a > img {
        transition: all 0.5s;
      }
      .wrap > .right > a > img:hover {
        transform: rotate(36000deg);
      }
      .pic {
        position: relative;
      }
      .pic > div {
        position: absolute;
        left: 0;
        top: -20px;
        overflow: hidden;
      }
      .pic > div > img:nth-of-type(2) {
        display: none;
      }
      .pic:hover > div > img:nth-of-type(1) {
        display: none;
      }
      .pic:hover > div > img:nth-of-type(2) {
        display: block;
      }
      .pic:hover > div {
        animation: expand 0.5s linear;
      }

      @keyframes expand {
        0% {
          width: 25%;
          height: 100%;
        }
        100% {
          width: 100%;
          height: 100%;
        }
      }
    </style>
  </head>
  <body>
    <header>
      <div class="wrap">
        <div class="logo"><img src="images/logo_170x46.png" alt="" /></div>
        <ul>
          <li class="pic">
            <a href="#">返回商城</a>
            <div>
              <img src="images/header_03.png" alt="" />
              <img src="images/header_05.png" alt="" />
            </div>
          </li>
          <li>|</li>
          <li><a href="#">商旅频道</a></li>
          <li>|</li>
          <li class="pic">
            <a href="#">积分商城</a>
            <div>
              <img src="images/header_07.png" alt="" />
              <img src="images/header_09.png" alt="" />
            </div>
          </li>
          <li>|</li>
          <li><a href="#">商旅频道</a></li>
          <li>|</li>
          <li><a href="#">了解彩贝</a></li>
          <li>|</li>
          <li><a href="#">彩贝活动</a></li>
          <li>|</li>
          <li><a href="#">个人中心</a></li>
        </ul>
        <div class="right">
          <a href="#"><img src="images/iconsB_11.gif" alt="" /></a>
          <a href="#"><img src="images/iconsB_12.gif" alt="" /></a>
          <a href="#"><img src="images/iconsB_13.png" alt="" /></a>
        </div>
      </div>
    </header>
  </body>
</html>
